<template>
  <el-dialog
    width="1000px"

    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form style="max-height:800px;overflow: auto;" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px">
      <el-row>
        <el-col :span="12">
            <el-form-item label="路由器名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="路由器名称"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
                <el-form-item label="选择输入通道" prop="fromChannelId">
                  <el-select filterable v-model="dataForm.fromChannelId" placeholder="请选择输入通道" clearable
                             :style="{width: '98%'}" @change="setFromChannelName">
                    <el-option v-for="(item, index) in channels" :key="index" :label="item.name"
                               :value="item.id" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="选择输出通道" prop="toChannelId">
          <el-select filterable  v-model="dataForm.toChannelId" placeholder="请选择输出通道" clearable
                     :style="{width: '98%'}" @change="setToChannelName">
            <el-option v-for="(item, index) in channels" :key="index" :label="item.name"
                       :value="item.id" :disabled="item.disabled"></el-option>
          </el-select>

        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="选择转换器" prop="translatorId">
          <el-select filterable v-model="dataForm.translatorId" placeholder="请选择转换器" clearable
                     :style="{width: '98%'}" @change="setTranslatorName">
            <el-option v-for="(item, index) in translators" :key="index" :label="item.name"
                       :value="item.id" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="24">
        <el-form-item label="描述" prop="description">
          <el-input v-model="dataForm.description" type="textarea" placeholder="请输入描述" resize="none"
                    :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        translators:[],
        visible: false,
        dataForm: {
          id: 0,
          name: '',
          fromChannelId: '',
          fromChannelName: '',
          toChannelId: '',
          toChannelName: '',
          translatorId: '',
          translatorName: '',
          description: '',
        },
        dataRule: {
          name: [{ required: true, message: '路由器名称不能为空', trigger: 'blur' }],
          toChannelId: [{ required: true, message: '请选择输出通道', trigger: 'blur' }],
          fromChannelId: [{ required: true, message: '请选择输入通道', trigger: 'blur' }],
          translatorId: [{ required: true, message: '请选择转换器', trigger: 'blur' }],


        },
        channels:[]
      }
    },
    methods: {
      //获取所有通道
      getChannels(){
        this.$http({
          url: this.$http.adornUrl("/tbssbusroute/getTbSsbusChannelList"),
          method: "get"
        }).then(({ data }) => {
          if (data && data.code === 0) {
              this.channels=data.list
          }
        });
      },
      //获取所有转换器
      getTranslator(){
        this.$http({
          url: this.$http.adornUrl("/tbssbusroute/getTbSsbusTranslatorList"),
          method: "get"
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.translators=data.list
          }
        });
      },
      setFromChannelName(value){
        for (var i=0;i<this.channels.length;i++){
          var channel=this.channels[i];
          if(channel.id==value){
            this.dataForm.fromChannelName=channel.name;
          }
        }
      },
      setToChannelName(value){
        for (var i=0;i<this.channels.length;i++){
          var channel=this.channels[i];
          if(channel.id==value){
            this.dataForm.toChannelName=channel.name;
          }
        }
      },
      setTranslatorName(value){
        for (var i=0;i<this.translators.length;i++){
          var translator=this.translators[i];
          if(translator.id==value){
            this.dataForm.translatorName=translator.name;
          }
        }
      },
      init (id) {
        this.getChannels();
        this.getTranslator();
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl('/tbssbusroute/getById/'+id),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm=data.data;
              }else {
                this.$message.error(data.msg);
              }
            })
          }else {
            this.dataForm={}

          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/tbssbusroute/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || "",
                'name': this.dataForm.name,
                'fromChannelId': this.dataForm.fromChannelId,
                'fromChannelName': this.dataForm.fromChannelName,
                'toChannelId': this.dataForm.toChannelId,
                'toChannelName': this.dataForm.toChannelName,
                'translatorId': this.dataForm.translatorId,
                'translatorName': this.dataForm.translatorName,
                'description': this.dataForm.description,
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
